<template>
  <div class="table">
      <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-lx-friend"></i> {{title}}</el-breadcrumb-item>
        </el-breadcrumb>
        </div>
      <div class="container">
          <div class="handle-box">
            <el-input v-model="keyUser" placeholder="搜索用户名" class="handle-input mr10"></el-input>
        
            <el-button type="primary" icon="search" @click="handleAdd()">添加</el-button>
          </div>
           <el-table :data="searchAdmininfo(keyUser)" border class="table">
               <el-table-column label="用户名" prop="username" sortable> 
                </el-table-column>
                <el-table-column label="姓名" prop="name"> 
                </el-table-column>
                <el-table-column prop="role" label="角色" :formatter="calcRole">
                </el-table-column>
                <el-table-column label="创建时间"  align="center">                       
                        <template slot-scope="scope">                            
                            <span>{{ scope.row.created_at | moment }}</span>
                        </template>
                </el-table-column>
                <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="pageSizes"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="userList.length">
                    </el-pagination>
      </div>
      </div>

    <el-dialog title="添加用户信息" :visible.sync="addVisible">
      <el-form :model="addForm"  ref="ruleForm">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="addForm.password"  show-password></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="addForm.role" placeholder="请选择" style="width: 100%;">
            <el-option label="超级管理员" :value="1"></el-option>
            <el-option label="普通管理员" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
              <el-button @click="addVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveAdd">确 定</el-button>
      </span>
    </el-dialog>

   <el-dialog title="修改管理员" :visible.sync="editVisible" width="30%">
      <el-form  :model="editForm" label-width="60px">
        <el-form-item label="用户名">
          <el-input v-model="editForm.username"></el-input>
        </el-form-item>
       
        <el-form-item label="姓名">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="editForm.role" placeholder="请选择" style="width: 100%;">
            <el-option label="超级管理员" value="1"></el-option>
            <el-option label="普通管理员" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
data(){
    return{
        title: this.$route.meta.title,

        keyUser:"",
        tableData:[],
        addVisible:false,
        addForm:{},
        
        editVisible:false,
        editForm:{},
        userList:[],
        currentPage:1,
        pageSizes:[2,4,12,16],
        pageSize:4,
    }
},
created(){
    this.getUserinfo()
},
methods:{
    
   async getUserinfo(){
            // let res = await this.$axios.get('/admin/all')
            // .then(res=>{
            //     this.userList= res.data
            //     this.getPageData()
                
            // })
            // console.log(res.data)
            // this.userList = res.data
            // this.getPageData()
            let res = await fetch('http://localhost:3000/admin/all')
            let data = await res.json()
            console.log(res)
            console.log(data)
            this.userList = data
            this.getPageData()
    },
    getPageData(){
        let start = (this.currentPage-1)*this.pageSize;
        let end = start+this.pageSize;
        this.tableData = this.userList.slice(start,end)
    },
    searchAdmininfo(keyUser){
        return this.tableData.filter((user)=>{
            if(user.username.includes(keyUser)){
                return user
            }
        })
    },
    calcRole (row, column) {
        return row[column.property] == 1 ? '超级管理员' : '普通管理员'
      },
    handleDelete(index,row){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                let params = {
                    id:row.id
                }
                this.$axios.delete("/admin/del",{data:params}).then(res=>{
                    this.$message({
                            type:"success",
                            message:"删除信息成功"
                        })
                    this.getUserinfo()
                })
            }).catch(()=>{
                console.log("放弃了")
            })
    },
    saveAdd(){
         this.$axios.post('/admin/add',this.addForm).then(res=>{
                        this.$message({
                            type:"success",
                            message:"添加信息成功"
                        })
                        this.addVisible =false;
                        this.getUserinfo()
                        this.addForm={}
            })
    },
    handleAdd(){
        this.addVisible = true
    },
    handleEdit(index,row){
        this.editVisible = true
        this.editForm={
            id:row.id,
            username:row.username,
            name:row.name,
            role:row.role,
            password:row.password
        }
    },
    saveEdit(){
         let editForm = {
                id:this.editForm.id,
                username:this.editForm.username,
                name:this.editForm.name,
                password:this.editForm.password,
                role:this.editForm.role
            }
            this.$axios.put('/admin/update',editForm).then(res=>{
                        this.$message({
                            type:"success",
                            message:"添加信息成功"
                        })
                        this.editVisible =false;
                        this.getUserinfo()
            })
    },
     handleSizeChange(val){
            this.pageSize = val
            // this.getUserinfo()
            this.getPageData()
        },
        handleCurrentChange(val){
            this.currentPage = val
            this.getPageData()


        }
}
}
</script>

<style scoped>
 .handle-box {
    margin-bottom: 10px;
    display: flex;
    
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .table {
    width: 100%;
    font-size: 14px;
    /* padding: 10px; */
  }
  .crumbs{
      margin: 10px;
  }
  .container{
      padding: 20px;
      background: #fff;
      margin: 10px;
  }

  .red {
    color: #ff0000;
  }

  .mr10 {
    margin-right: 10px;
  }
</style>